<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">

    </div>

    <template id="one">
        {{c3}}
        <!-- 使用 component 动态组件标签，通过is属性来切换需要显示的组件
        <component :is="c1">
            <h1>我是动态组件1</h1>
        </component>
        <component :is="c2">
            <h2>我是动态组件2</h2>
        </component>
        <component :is="c3" :myobj="obj">
            <h3>我是动态组件3</h3>
        </component> -->

        <hr>
        <button @click="changecom">更换组件</button>
    </template>

    <!-- 组件1
    <template id="two">
        <div>哈哈哈哈啊啊哈哈哈</div>
    </template>
    组件2 -->
    <!-- <template id="three">
        <div>
            嘿嘿嘿嘿嘿嘿噢噢噢噢
            <br>{{myobj}}<br>{{myobj.name}}:{{myobj.age}}
        </div>
    </template> -->
</body>
<script>
    //根组件信息生命流程
    const HelloVueApp = {
        template: '#one',
        beforeCreate(){
            console.log('beforeCreate');
        },
        created(){
            console.log('created');
        },
        beforeMount(){
            console.log('beforeMount');
        },
        mounted(){
            console.log('mounted');
        },
        beforeUpdate(){
            console.log('beforeUpdate');
        },
        updated(){
            console.log('updated');
        },
        beforeUnmount(){
            //只有一个组件，演示不出效果。
            console.log('beforeUnmount');
        },
        unmounted(){
             //只有一个组件，演示不出效果。
            console.log('unmounted');
        },
        data() {
            return {
                'c3': 'two'
            }
        },
        methods: {
            changecom() {
                this.c3 = this.c3 == 'two' ? 'three' : 'two';
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>

</html>